<!DOCTYPE html>
<html>
<head>
	<title>test</title>
</head>
<body>
	<header style="padding: 5px">
		<h2>任务及时处理-模拟</h2>
	</header>

	<div class="point" open-button status="1" for="#list">任务列表<span class="status">-</span></div>
	<div id="list" class="list" style="border:1px solid #ececec;border: 1px solid #ececec;
    max-height: 200px;
    overflow-y: auto;">
		<ul id="tasklist">
			<li>订单:1<span class="fr btn">已处理</span></li>
			<li>订单:2<span class="fr btn">已处理</span></li>
		</ul>
	</div>

	<div class="point" open-button status="0" for="#footer">处理中<span class="status">+</span></div>
	<footer id="footer" style="display: none">
		<ul id="deallist">
		</ul>
	</footer>
	<script type="text/javascript">
		
	</script>
	<style type="text/css">
	ul{
		margin: 0;
	    padding: 0;
	    list-style: none;
	}
	li{
	    display: block;
	    padding: 5px;
	    border: #8BC34A 1px solid;
	    margin: 5px;
	    font-size: 16px;
	}
	li span{

	}
	div.title,div.description{
		border-bottom: #ccc 1px dotted;
	}
	div.title{
	    background: #3a3a3a;
	    color: #fff;
	    text-align: center;
	}
	a{
		text-decoration: none;
    	color: #666;
	}
	span.btn{
		font-size: 12px;
		border: #ccc 1px solid;
	    padding: 1px 4px;
	    border-radius: 10%;
	    background: #999e92;
	    color: #fff;
	    cursor: pointer;
	}
	.fr{
		float: right;
	}
	.fl{
		float: left;
	}
	.point{
		cursor: pointer;
	}
	.label{
		background: #000;
		color: #fff;
	}
	</style>
	<script src="/component/jquery.min.js"></script>
	<script type="text/javascript">
		var myInt;
		var auto_index = 1;
		var deal_index = 1;
		 
		function myFunction() {
		    myInt = setInterval(alertFunc, 3000);
		}
		function myStopFunction() {
		    clearInterval(myInt);
		}
		function alertFunc() {
		    $('#tasklist').append('<li id="index_'+auto_index+'">订单:'+(new Date()).getTime()+'<span class="fr btn">待处理</span></li>');
		    var _len = $('#deallist').find('li').length;
		    console.log(_len);
		    if(_len<2){
		    	adddeal(2-_len);
		    }
		    auto_index++;
		}
		function adddeal(num){
			for(var x=0;x<num;x++){
				if(deal_index>auto_index){
					break;
				}
				console.log('i',x)
				var tmp = $('#index_'+deal_index);
				var dealli = tmp.html();
				tmp.find('span').html('处理中');
				$('#deallist').append('<li id="deal_'+deal_index+'">'+dealli+'</li>');
				$('#deal_'+deal_index).find('span').html('处理')
				$('#deal_'+deal_index).find('span').click(function(){
					_id = $(this).parent().attr('id').split('_')[1];
					$(this).parent().remove();
					$('#index_'+_id).find('span').html('已处理');
				})
				deal_index++;
			}
			
		}
		myFunction()

		$('*[open-button]').click(function(){
			var open = $(this).attr('status');
			var _for = $(this).attr('for');
			if(open=='0')
			{
				$(this).parent().addClass('active');
				open = 1;
				$(this).attr('status',open);
				$(this).find('.status').html('-');
				$(this).parent().find(_for).show();
			}
			else
			{
				open = 0;
				$(this).parent().removeClass('active');
				$(this).attr('status',open);
				$(this).find('.status').html('+');
				$(this).parent().find(_for).hide();
			}
			
		})
		function formpost(obj){
			var form = '#'+$(obj).attr('form');
			var data = $(form).serialize();

			$.post('/knowledge/create',data,function(res){
				console.log(res);
			})
			return false;
		}
	</script>
</body>
</html>